<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>开播界面</title>
</head>
<body>
	<video src="" autoplay="autoplay"></video>
	<canvas id="output" style="display: none;width:100%;"></canvas>
</body>
<script>
var back = document.querySelector("#output");
var backContext = back.getContext('2d');
var video = document.querySelector('video');
var socket;
var interval;

setTimeout("init()", 100);

function init() {
	socket = new WebSocket('ws://192.168.0.128:8080/live/show');
	socket.onopen = onOpen;
	socket.onclose = onClose;
}

function onOpen() {
	clearInterval(interval);
	interval = setInterval(function() {
		draw();
	}, 50);
}

function onClose() {
	init();
}

if (navigator.mediaDevices === undefined) {
   	navigator.mediaDevices = {};
 }  
 if (navigator.mediaDevices.getUserMedia === undefined) {
   	navigator.mediaDevices.getUserMedia = function (constraints) {
      	var getUserMedia = navigator.webkitGetUserMedia
        	|| navigator.mozGetUserMedia
        	|| navigator.msGetUserMedia;
	    if (!getUserMedia) {
	    	return Promise.reject(new Error('getUserMedia is not implemented in this browser'));
	    }
	    return new Promise(function(resolve, reject) {
	    	getUserMedia.call(navigator, constraints, resolve, reject);
	    });
	}
 }
navigator.mediaDevices.getUserMedia({audio: true, video: true})
.then(function (stream) {
	if ("srcObject" in video) {
      video.srcObject = stream;
    } else {
      video.src = window.URL.createObjectURL(stream);
    }
    video.onloadedmetadata = function (e) {
      video.play();
    };
})
.catch(function(err) {
	console.log(err.name + ": " + err.message);
});
function draw() {
	backContext.drawImage(video, 0, 0, back.width, back.height);
	socket.send(back.toDataURL("image/jpeg", 0.6));
}
</script>
</html>
